<template>
	<comRoot>
		<template #page>
			<view class="competition-record-page font-hanserif-bold">
				<!-- 自定义导航栏 -->
				<comDetailNavigateBack title="爬塔记录" />

				<!-- 页面背景 -->
				<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" 
					:src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />

				<comScrollTab v-model="tabIndex" :list="tabAreaList" :isDiyTabBg="true">
					<!--
						'calc(100vh - ' + commonNavHeight + ' - 90rpx - 60rpx)'
						页面整体高度 - 自定义导航栏高度 - 顶部tababr切换栏高度 - 底部显示“没有更多了”文本高度
					  -->
					<scroll-view
						class=""
						scroll-y
						@scrolltolower="scrolltolower"
						:style="{
							width: '710rpx',
							height: 'calc(100vh - ' + commonNavHeight + ' - 90rpx - 60rpx)',
							position: 'relative',
							left: 0,
							right: 0,
							margin: 'auto',
						}"
					>

						<!-- 中奖记录 -->
						<template v-if="tabIndex === 0">
							<view class="item-record relative flex-direction-column" v-for="(item, index) of resLists" :key="index">
								<image class="bg" 
									:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/left-record-bg.png`"
									mode=""></image>
								<view class="item-record-top relative flex-justify-content-between flex-align-items-center">
									<view class="flex">
										<view class="top-left relative flex-all-center">
											<image class="img relative" :src="item.avatar" mode=""></image>
										</view>
										<view class="top-right relative flex-direction-column flex-justify-content-center">
											<view class="top-right-name truncate">{{ item.nickname }}</view>
											<view class="top-right-time truncate">{{ item.create_time }}</view>
										</view>
									</view>
									<view class="item-record-scene">{{ item.scene_name }}</view>
								</view>
								<view class="item-record-bottom relative">
									<view class="box-content-list absolute flex">
										<view class="bag-goods-list flex-justify-content-between flex-wrap" v-if="item.detail_list && item.detail_list.length">
											<view class="content-pool-detail relative" v-for="(subItem, subIndex) in item.detail_list" :key="subIndex" @click="gooShopDetailFun(subItem, subIndex)">
												<view class="bag-goods-type absolute" v-if="subItem.reward_item_type">
													<image class="bag-goods-type-img relative"
														:src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/level-` + subItem.reward_item_type.toLowerCase() + '.png'"
														mode="heightFix"></image>
												</view>
												<view class="content-pool-cover relative flex-all-center">
													<image class="bg absolute" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/common/level/small-border-${subItem.reward_item_type && subItem.reward_item_type.toLowerCase()}.png`" mode=""></image>
													<comPlaceImage
														class="pool-cover-img"
														placeImageClass="flex-all-center"
														:lazyLoad="true"
														:src="subItem.reward_item_cover"
														mode="heightFix"></comPlaceImage>
												</view>
												<view class="content-pool-txt truncate">{{ subItem.reward_item_name }}</view>
												<view class="content-item-price text-nowrap">
													价值：
													<text class="price">{{ subItem.recovery_price }}</text>
												</view>
											</view>
											<view class="content-pool-detail relative"></view>
										</view>
									</view>
									
								</view>
							</view>
						</template>
						<!-- 兑换记录 -->
						<template v-else-if="tabIndex === 1">
							<view v-for="(item, index) of resLists" :key="index">
								<view class="list-info relative">
									<image class="bg"
										:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/right-record-bg.png`"
										mode=""></image>
										
									<view class="flex-justify-content-between flex-align-items-center relative" style="height: 100%">
	
										<view class="list-item-left relative flex-all-center">
											<image class="bg"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/exchange-right-box-bg.png`"
												mode=""></image>
											
											<image class="item-cover relative"
												:src="`${commonConfigs.domainFrontFileLink}/files/images/competition/tonic-left-img.png`"
												mode="heightFix"></image>
												
											<view class="item-num absolute">
												<text class="relative">x{{ item.medal_num }}</text>
											</view>
										</view>
										
										<view class="list-item-txt flex-full flex-direction-column flex-justify-content-center">
											<view class="list-item-right truncate flex flex-align-items-center">
												<text class="name truncate">{{ item.special_item_name }}</text>
												*{{ item.item_num }}
											</view>
											<view class="list-item-center truncate">{{ item.create_time }}</view>
										</view>
									</view>
									
								</view>
							</view>
						</template>

						<view v-if="!resLists.length" class="flex-align-items-center flex-justify-content-center" style="height: 100%">
							<view style="width: 100%;">
								<comEmptyData></comEmptyData>
							</view>
						</view>

						<comLoadMore :loading="loading" :showLoadendTxt="showLoadendTxt" class="loadmore-txt"></comLoadMore>
					</scroll-view>
				</comScrollTab>
			</view>
		</template>
	</comRoot>
</template>

<script>
import {
	getChallengeRewardRecordApi, // 领取记录
	getChallengeMedalReceiveLogApi // 徽章兑换记录
} from '@/setupproject/INTERFACE';

import pager from '@/inmixed/paging.mixin.js';

export default {
	name: 'competitionRecordPage',
	mixins: [pager],
	data() {
		return {
			gyms_id: '',
			tabAreaList: [
				{ type: 1, text: '中赏记录', imgWidth: '162rpx', imgHeight: '56rpx', tabBgImg: '/files/images/common/tabarea-item.png', tabBgImgActive: '/files/images/common/tabarea-item-active.png' }, 
				{ type: 2, text: '兑换记录', imgWidth: '162rpx', imgHeight: '56rpx', tabBgImg: '/files/images/common/tabarea-item.png', tabBgImgActive: '/files/images/common/tabarea-item-active.png' },
			],
			tabIndex: 0,
			loading: false,
		};
	},
	computed: {
		commonConfigs() {
			return this.$store.getters.commonConfigs || {};
		},
		commonNavHeight() {
			return this.$store.getters.commonNavHeight + 'px';
		},
		showLoadendTxt() {
			return this.isShowPageLoadedTxt && !this.loading && this.resLists.length ? true : false;
		}
	},
	watch: {
		tabIndex() {
			/* 方法来自 pager.mixin */
			this.pagingInitFun();
			this.resListsGetFun();
		}
	},
	async onLoad({ gyms_id }) {
		this.gyms_id = gyms_id;
		this.resListsGetFun();
	},
	methods: {
		/* 需要固定为listsGetFun；以配合 pager.mixin */
		async listsGetFun(e) {
			const sendData = { ...this.pageInfoObj };
			(sendData.gyms_id = this.gyms_id),
				(this.loading = true);
			let tempData, tempCode;
			if (this.tabIndex === 0) {
				const { data, code } = await getChallengeRewardRecordApi(sendData);
				tempData = data;
				tempCode = code;
			} else if (this.tabIndex === 1) {
				const { data, code } = await getChallengeMedalReceiveLogApi(sendData);
				tempData = data;
				tempCode = code;
			}

			this.loading = false;
			if (tempCode !== 200) return false;

			const resLists = tempData.record;
			console.log('resLists', resLists);
			/* 返回 到 pager.mixin 处理 */
			return {
				resLists,
				count: tempData.count
			};
		},
		
	}
};
</script>

<style lang="scss" scoped>
.item-record {
	width: 710rpx;
	height: 403rpx;
	margin: 0rpx auto 24rpx;
	padding: 28rpx 32rpx;
	
	font-size: 28rpx;
	color: #111111;
	
	.item-record-top {
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid rgba(255, 255, 255, 0.3);
		
		.item-record-scene {
			font-size: 38rpx;
			color: #111111;
		}
		
		.top-left {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 24rpx;
			.img {
				width: 66rpx;
				height: 66rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}
		.top-right {
			width: 300rpx;
			height: 80rpx;
			.top-right-name {
				width: 100%;
				font-size: 28rpx;
			}
			.top-right-time {
				margin-top: 16rpx;
				font-size: 20rpx;
				color: #999999;
			}
		}
	}
	.item-record-bottom {

		.box-content-list {
			width: 640rpx;
			overflow-x: auto;
			overflow-y: auto;
			flex-wrap: wrap;
			align-content: flex-start;
			
			.bag-goods-list {
				padding: 12rpx 18rpx;
				color: #FFF;
			}
				
			.content-pool-detail {
				width: 160rpx;
				margin-right: 10rpx;
				margin-bottom: 22rpx;
				
				.bag-goods-type {
					top: 6rpx;
					left: 6rpx;
					
					.bag-goods-type-img {
						height: 34rpx;
						z-index: 98;
					}
				}
				
				.content-pool-cover {
					width: 160rpx;
					height: 177rpx;
					
					.pool-cover-img {
						width: 126rpx;
						height: 130rpx;
						overflow: hidden;
					}
				}
				
				.content-pool-txt {
					width: 100%;
					height: 26rpx;
					line-height: 26rpx;
					color: #111111;
					font-size: 26rpx;
					text-align: center;
					margin-top: 6rpx;
				}
				
				.content-item-price {
					margin-top: 4rpx;
					font-size: 24rpx;
					color: #88875A;
					text-align: center;
				}
				
				.content-item-rate {
					margin-top: 4rpx;
					font-size: 24rpx;
					color: #D56E28;
					text-align: center;
				}
					
			}
			
		}
		
		.bottom-list {
			margin-top: 14rpx;
			width: 640rpx;
			overflow-x: auto;
			.list-item {
				width: 136rpx;
				font-size: 18rpx;
				color: #fff;
				margin-right: 16rpx;
				.list-item-img {
					width: 136rpx;
					height: 198rpx;
					.cover {
						width: 116rpx;
						max-height: 198rpx;
					}
				}
				.list-item-name {
					margin-top: 10rpx;
				}
				.list-item-price {
					margin-top: 4rpx;
					.price {
						color: #f8c3e8;
					}
				}
			}
		}
	}
}


// 兑换记录
.list-info {
	width: 710rpx;
	height: 170rpx;
	padding: 0 20rpx;
	margin: 25rpx 10rpx;
	font-size: 28rpx;
	color: #111111;
	.list-item-left {
		width: 128rpx;
		height: 128rpx;
		overflow: hidden;
		
		.item-cover {
			width: 100rpx;
			height: 100rpx;
		}
		
		.item-num {
			right: 4rpx;
			bottom: 4rpx;
			
			min-width: 54rpx;
			padding: 0 8rpx;
			height: 25rpx;
			line-height: 25rpx;
			background: rgba(0, 0, 0, 0.4);
			border-radius: 20rpx 0rpx 10rpx 0rpx;
			color: #FFF;
		}
	}
	
	.list-item-txt {
		height: 100%;
		padding-left: 20rpx;
		.list-item-right {
			text-align: right;
			font-size: 28rpx;
			color: #E3670E;
		}
		.list-item-center {
			font-size: 22rpx;
			color: #88875A;
			margin-top: 18rpx;
		}
		
	}
	
}

.loadmore-txt {
	font-size: 28rpx;
	color: #111111;
}
</style>
